<template>
  <el-container>
    <el-header>
      <el-form ref="form" :inline="true" :model="flowMainData" label-width="80px">
        <el-form-item label="流程名称">
          <el-input v-model="flowMainData.flowName"></el-input>
        </el-form-item>
        <el-form-item label="业务菜单">
          <el-select v-model="flowMainData.bussinessType" placeholder="业务菜单">
            <el-option label="员工请假" value="tb_user_offline"></el-option>
            <el-option label="员工离职" value="tb_user_leave"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发布时间">
          <el-col>
            <el-date-picker type="date" placeholder="选择日期" v-model="flowMainData.publishTime"
              style="width: 100%"></el-date-picker>
          </el-col>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
        </el-form-item>
      </el-form>
    </el-header>
    <el-container>
      <el-aside width="70%">
        <div class="containers">
          <div class="canvas" ref="canvas"></div>
        </div>
      </el-aside>
      <el-main>
        <el-form ref="form" :model="flowNodeData" label-width="80px" style="text-align: left;">
          <el-form-item label="节点名称">
            <el-input v-model="flowNodeData.flowNodeName" @change="nodeInputChange"></el-input>
          </el-form-item>
          <el-form-item label="审批类型" v-if="this.config.flowNodeCheckTypeVisible==true">
            <el-radio-group v-model="flowNodeData.flowNodeCheckType">
              <el-radio label="0">按角色</el-radio>
              <el-radio label="1">按用户</el-radio>
              <el-radio label="2">按部门</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="角色" v-if="flowNodeData.flowNodeCheckType == 0 && this.config.flowNodeCheckTypeVisible==true">
            <el-select v-model="flowNodeData.flowNodeType" placeholder="角色">
              <el-option label="所有人" value="-1"></el-option>
              <el-option label="部门管理员" value="2"></el-option>
              <el-option label="HR" value="3"></el-option>
              <el-option label="经理" value="4"></el-option>
              <el-option label="人力总监" value="5"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="部门" v-if="flowNodeData.flowNodeCheckType == 1  && this.config.flowNodeCheckTypeVisible==true">
            <el-select v-model="flowNodeData.flowNodeType" placeholder="部门">
              <el-option label="所有人" value="-1"></el-option>
              <el-option label="部门管理员" value="2"></el-option>
              <el-option label="HR" value="3"></el-option>
              <el-option label="经理" value="4"></el-option>
              <el-option label="人力总监" value="5"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="用户" v-if="flowNodeData.flowNodeCheckType == 2  && this.config.flowNodeCheckTypeVisible==true">
            <el-select v-model="flowNodeData.flowNodeType" placeholder="用户">
              <el-option label="所有人" value="-1"></el-option>
              <el-option label="部门管理员" value="2"></el-option>
              <el-option label="HR" value="3"></el-option>
              <el-option label="经理" value="4"></el-option>
              <el-option label="人力总监" value="5"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="字段" v-if="this.config.flowNodeCheckTypeVisible==false">
            <el-select v-model="flowNodeCondtion.displayColumnName" placeholder="字段">
              <el-option label="请假人" value="-1"></el-option>
              <el-option label="请假天数" value="days"></el-option>
              <el-option label="请假类型" value="3"></el-option>
             
            </el-select>
          </el-form-item>
          <el-form-item label="列名" v-if="this.config.flowNodeCheckTypeVisible==false">
            <el-input v-model="flowNodeCondtion.columnName"></el-input>
          </el-form-item>
          <el-form-item label="条件表达式" v-if="this.config.flowNodeCheckTypeVisible==false">
            <el-select v-model="flowNodeCondtion.columnCondtion" placeholder="条件表达式">
              <el-option label="大于" value="-1"></el-option>
              <el-option label="等于" value="2"></el-option>
              <el-option label="小于" value="3"></el-option>
              <el-option label="包括" value="3"></el-option>
             
            </el-select>
          </el-form-item>
          <el-form-item label="条件值" v-if="this.config.flowNodeCheckTypeVisible==false">
            <el-input v-model="flowNodeCondtion.columnNameValue"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onNodeSubmit">保存节点数据</el-button>
          </el-form-item>
        </el-form>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
import BpmnModeler from "bpmn-js/lib/Modeler";
import { xmlStr } from "../mock/flow";

export default {
  name: "ops-coffee",
  mounted() {
    this.init();
  },
  data() {
    return {
      //流程可视化数据
      bpmnModeler: null,
      container: null,
      canvas: null,
      currentNodeElement: null,

      //流程主表数据
      flowMainData: {
        flowName: "",
        bussinessType: "",
        publishTime: "",
      },
      //节点数据
      flowNodeData: {
        flowNodeName: "",
        flowNodeType: "",
        flowNodeCheckType: "",
      },
      //查 询条件
      flowNodeCondtion:
      {
        displayColumnName:"",
        columnName:"",
        columnCondtion:"",
        columnNameValue:"",
      },
      //流程节点保存数据
      flowNodeList: [],
      //流程页面控制集合
      config: {
        flowNodeCheckTypeVisible: 0,
      },
    };
  },
  methods: {
    init() {
      const canvas = this.$refs.canvas;
      this.bpmnModeler = new BpmnModeler({
        container: canvas,
      });

      this.createNewDiagram();
      this.addNodeListing();
    },
    createNewDiagram() {
      try {
        if(localStorage.getItem("bpmnModelerXML")!=null){
        this.bpmnModeler.importXML(localStorage.getItem("bpmnModelerXML"));
        }
        else
        {
          this.bpmnModeler.importXML(xmlStr);
        }
      } catch (err) {
        console.log(err.message, err.warnings);
      }
    },
    //添加节点监听
    addNodeListing() {
      const eventBus = this.bpmnModeler.get("eventBus");
      // 注册节点事件，eventTypes中可以写多个事件
      const eventTypes = ["element.click", "element.hover"];
      eventTypes.forEach((eventType) => {
        eventBus.on(eventType, (e) => {
          const { element } = e;
          if (!element.parent) return;
          if (!e || element.type === "bpmn:Process") {
            return false;
          } else {
            if (eventType === "element.click") {
              // 节点点击后想要做的处理
              // 此时想要点击节点后，拿到节点实例，通过外部输入更新节点名称
              this.currentElement = element;
              this.flowNodeData.flowNodeName =
                this.currentElement.di.bpmnElement.name;
                console.log(element.type)
              console.log(this.currentElement);

              if(element.type=="bpmn:ExclusiveGateway")
              this.config.flowNodeCheckTypeVisible=false
              else
              this.config.flowNodeCheckTypeVisible=true

            } else if (eventType === "element.hover") {
              // 鼠标滑过节点后想要做的处理
              //this.currentElement = element;
             // this.flowNodeData.flowNodeName =
              //  this.currentElement.di.bpmnElement.name;

            }
          }
        });
      });
    },
    //保存流程数据主方法
    onSubmit() {
      this.bpmnModeler.saveXML({ format: true }).then((res) => {
      localStorage.setItem("bpmnModelerXML", res.xml);
      })
      console.log(this.currentElement);
      console.log("onSubmit");
    },
    //存储流程节点
    onNodeSubmit() {
      console.log("onNodeSubmit");
    },
    nodeInputChange() {
      const modeling = this.bpmnModeler.get("modeling");
      if (JSON.stringify(this.currentElement) === "{}") {
        this.$message.info("请保证要更改的节点处于选中状态!");
        return false;
      } else {
        modeling.updateLabel(
          this.currentElement,
          this.flowNodeData.flowNodeName
        );
      }
    },
  },
};
</script>

<style scoped>
.containers {
  width: 100%;
  height: calc(100vh - 82px);
}

.canvas {
  width: 100%;
  height: 100%;
}

.el-tag+.el-tag {
  margin-left: 10px;
}

.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>
